<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/lib/vue/vue3.1.1.js"></script>
    <style>
        .class1 {
            background: #444;
            color: #eee;
        }
    </style>
</head>
<body>

<div id="app">
    <!--插值-->
    <!--文本-->
    <p>使用双大括号的文本插值: {{message}}---------<span v-once>这个将不会改变：{{message}}</span></p>
    <!--html-->
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>

    <!--属性-->
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <!--    <div v-bind:class="{'class1': use}">-->
    <div :class="{'class1': use}">
        v-bind:class 指令
    </div>

    <!--    表达式-->
    <p>{{5+5}}<br>
        {{ok ? 'Yes' : 'NO'}}<br>
        {{ message.split('').reverse().join('') }}<br>
        <span :id="'list-' + id">菜鸟教程</span></p>

    <!--    指令-->
    <p><span v-if="seen">现在你看到我了</span><br>
    <ol><li v-for="item in items">{{item.text}}</li></ol>
    </p>

<!--    参数-->
    <p><a :href="url">菜鸟教程</a>
<!--       <a v-on:click="doSomething">菜鸟教程</a> -->
<!--       <a @click="doSomething">菜鸟教程</a>-->
    </p>

    <p><input v-model="message"></p>

    <p><button @click="reverseMessage">反转字符串</button></p>
</div>


<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello Vue!!',
                rawHtml: '<span style="color: orange">显示orange色</span>',
                use: false,
                ok: true,
                id: 1,
                seen: true,
                items: [{text: 'Google'},{text:'Baidu'},{text:'Bing'}],
                url: 'https://www.runoob.com'
            }
        },
        methods: {
            reverseMessage() {
                this.message = this.message.split('').reverse().join('')
            }
        }
    }).mount('#app')
</script>
</body>
</html>